<template>
  <div id="app">
  <mt-header :title="value" fixed>
  <router-link to="/" slot="left" >
    <mt-button icon="back">返回</mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button>
</mt-header>

  <keep-alive><router-view class="marginTop"></router-view></keep-alive>
    <mt-tabbar v-model="value" fixed>
  <mt-tab-item id="首页">
     <router-link to='/' exact active-class="active">
    <i class="iconfont icon-shouye"></i>
     <br>
    首页
     </router-link>   
  </mt-tab-item>
  <mt-tab-item id="新闻">
     <router-link to='/news'>
   <i class="iconfont icon-wodedingdan"></i>
    <br>
    新闻
     </router-link>
  </mt-tab-item> 
  <mt-tab-item id="产品">
     <router-link to='/production'  >
   <i class="iconfont icon-liwu"></i>
   <br>
    产品
     </router-link>
  </mt-tab-item>
  <mt-tab-item id="购物车">
     <router-link to='/cart'  >
   <i class="iconfont icon-gouwuche"></i>
    <br>
    购物车
      <mt-badge size="small" type="error">{{cartsNum}}</mt-badge>
     </router-link>
   
  </mt-tab-item>
  <mt-tab-item id="我的">
     <router-link to='/my'>
   <i class="iconfont icon-wodejuhuasuan"></i>
    <br>
   我的
    </router-link>
  </mt-tab-item>
</mt-tabbar>
    
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "app",
  data() {
    return {
       value: "首页"
    }
  },
   computed: {
          ...mapGetters(["carts", "production","cartsNum"])
  }
};
</script>

<style lang="scss">
body{
   padding: 0;
   margin: 0
}

.marginTop{
  margin:40px 0;
}
.mint-tabbar a{
 text-decoration: none;
}
 .mint-tab-item a{color:#333;}
 .mint-tab-item-label .router-link-exact-active{color:#26a2ff;}
</style>
